<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{width: 300px;height: 50px;font-size: 25px;margin-left: 50%;}
        #msg{width: 100px;height: 50px;background-color: gray;display: none;position: absolute;}
    </style>
    <script>
    
    var arr = ['我是111','我是222','我是333','我是444']
        window.onload = function(){
            

            var oDiv = document.getElementById('div1')
            var oDivs = oDiv.getElementsByTagName("div")
            var oMsg = document.getElementById('msg')

            // console.log(oDivs.length)
            
            for (var i =0; i<oDivs.length;i++){
                oDivs[i].index = i
                oDivs[i].onmouseover = function(){
                    // console.log(this.index)
                    msg.innerHTML = arr[this.index]
                    oMsg.style.display = 'block'
                }

                oDivs[i].onmouseout = function(){
                    oMsg.style.display = 'none'
                }

                oDivs[i].onmousemove = function(ev){
                    var e = ev || window.event
                    // console.log(e.clientX)
                    oMsg.style.left = e.clientX + 5 +'px'
                    oMsg.style.top = e.clientY + 5 +'px'
                }
            }
        }
    </script>
</head>
<body>
    <div id = 'div1'>
        <div>111</div>
        <div>222</div>
        <div>333</div>
        <div>444</div>
    </div>
    
    <div id = "msg"></div>
</body>
</html>